<template>
	<view>
		<!-- 通告栏 -->
		<uni-notice-bar
			style="margin: 0;"
			single
			text="本店商品为路人王品牌正品,一旦售出,非质量问题概不退换!"
			scrollable
			showIcon
			showClose
			:speed="50"
		></uni-notice-bar>
		<!-- 轮播图 -->
		<uni-swiper-dot
			:info="lunbo"
			:current="current"
			field="content"
			:mode="mode"
			color="#FFF"
			
		>
			<swiper
				:indicator-dots="true"
				:autoplay="true"
				:interval="3000"
				:duration="1000"
				@change="change"
				
			>
				<swiper-item v-for="(item, index) in lunbo" :key="index">
					<image
						:src="item.img"
						style="width: 100%;height: h"
					></image>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		<!-- 宫格的商品列表 -->
		<uni-grid
			:column="2"
			:showBorder="false"
			:highlight="false"
			:square="false"
			style="background-color: #ECF0F3;"
		>
			<uni-grid-item v-for="(item,index) in shouye" :key="index">
				<view class="item" style="background-color: #fff;">
					<image :src="item.pic" style="width: 100%; height: h1;"></image>
					<view>
						<view>{{item.title}}</view>
						<view style="color: red;">¥ {{item.price}}</view>
						<button type="primary" size="mini" @click="goDetail(item.lid)">查看详情</button>
					</view>
				</view>
			</uni-grid-item>
		</uni-grid>
		<!-- 回到顶部按钮 -->
		<view class="btn-gotop" v-show="showGoTop" @click="doGoTop">
			<uni-icons color="white" size="20" type="arrowthinup"></uni-icons>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			h: null,
			baseUrl: null,
			showGoTop: false,
			//装轮播
			lunbo: null,
			current:0,
			//装首页商品信息
			shouye:null,
			h1:null
		};
	},
	mounted() {
		this.getDataIndex();
		this.getDataIncoural();
	},
	onPageScroll(e) {
		// console.log(e);
		this.showGoTop = e.scrollTop > 300;
	},
	methods: {
		// 轮播图变换时候触发的事件
		change(e) {
		            this.current = e.detail.current;
		        },
		initSwipeHeight() {
			let picw = 1164; // 图片宽
			let pich = 606; // 图片高
			let screenw = uni.getSystemInfoSync().windowWidth; // 屏幕宽
			let swipeh = (pich * screenw) / picw + 'px';
			this.h = swipeh;
		},
		initSwipeHeight1() {
			let picw = 750; // 图片宽
			let pich = 1000; // 图片高
			let screenw = uni.getSystemInfoSync().windowWidth; // 屏幕宽
			let swipeh = (pich * screenw) / picw + 'px';
			this.h1 = swipeh;
		},
		doGoTop() {
			console.log('触发回到顶部');
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 250
			});
		},
		//跳转详情页
		goDetail(lid) {
			uni.navigateTo({
				url: '../good-details/good-details?lid='+lid
			});
		},
		// 发送轮播图请求的函数
		getDataIncoural() {
			// #ifdef MP-WEIXIN
			this.baseUrl = 'http://127.0.0.1:3000/lunbo';
			// #endif
			uni.request({
				url: this.baseUrl,
				method: 'GET',
				data: {},
				success: res => {
					console.log(res);
					this.lunbo = res.data;
				},
				fail: err => {
					console.log(err);
				},
				complete: () => {}
			});
		},
		//发送请求获取列表信息
		getDataIndex(){
			// #ifdef MP-WEIXIN
			this.baseUrl = 'http://127.0.0.1:3000/products';
			// #endif
			uni.request({
				url: this.baseUrl,
				method: 'GET',
				data: {},
				success: res => {
					console.log(res);
					this.shouye = res.data;
				},
				fail: err => {
					console.log(err);
				},
				complete: () => {}
			});
		}
	}
};
</script>

<style lang="scss">
.item {
	margin: 6rpx;
	border: 1px solid #c6c6c6;
	border-radius: 8rpx;
	> image {
		width: 100%;
		height: 300rpx;
	}
	> view {
		padding: 10rpx;
		text-align: center;
		view {
			// 一行隐藏  ...
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			&:first-child {
				font-weight: bold;
			}
			&:nth-child(2) {
				color: red;
				font-size: 1.0em;
			}
			&:nth-child(3) {
				color: red;
				font: 1.1em;
			}
		}
		button {
			background-color: #09a6f4;
		}
	}
}
</style>
